<template>
  <div class="myborder" :style="{ width: '480px' }">
    <Myheader
      :src="src2"
      data="优秀学员"
      placeholder="请输入学员名称"
      :change="change2"
    >
    </Myheader>
    <div class="right-table">
      <Table2
        :centerref="centerref"
        :data="_char8"
        :chat="chat"
        height="100%"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import Myheader from "../../myheader.vue";
import Table2 from "../../table/table2.vue";
const src2 =
  "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_youxiuxuesheng.png";

const p = defineProps<{
  char7: any[];
  char8: Studycodemodel.Iuser[];
  centerref: any;
  num1: number;
  num3: number;
  num2: number;
  chat: string;
  char4: any;
  video3: number;
}>();

const name2 = ref("");
const change2 = (f: string) => {
  name2.value = f;
};

const _char8 = computed(() => {
  if (name2.value) {
    return p.char8.filter((c) => {
      return c.name?.includes(name2.value) || c.teamname?.includes(name2.value);
    });
  }
  return p.char8;
});
</script>

<style scoped>
.right-table {
  padding: 12px 12px 6px 12px;
  --el-table-bg-color: rgba(0, 0, 0, 0.2);
  background-color: var(--el-table-bg-color);
  border-radius: 4px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  margin-top: 24px;
}

.righttop {
  margin-left: -12px;
  margin-right: -12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #545e72;
  padding-right: 12px;
}

.righttop {
  text-align: center;
}

.righttoptext {
  text-align: left;
}

.text-1 {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  font-family: "FZZongYi-M05S";
  height: 32px;
  line-height: 32px;
}

.text-2 {
  line-height: 32px;
}

.colora {
  background: linear-gradient(315deg, #0670f8 0%, #34c7fc 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 22px;
  color: transparent;
  display: inline-block;
  font-family: Bebas;
  font-weight: 700;
}

.colorb {
  background: linear-gradient(180deg, #fe8b16 0%, #f84228 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 22px;
  color: transparent;
  display: inline-block;
  font-family: Bebas;
  font-weight: 700;
}

.colorc {
  background: linear-gradient(180deg, #fcf100 0%, #f5a300 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 22px;
  color: transparent;
  display: inline-block;
  font-family: Bebas;
  font-weight: 700;
}

.texta {
  font-size: 14px;
  color: #fff;
  display: inline-block;
  margin-left: 6px;
}

.righttopbody {
  padding-left: 12px;
}

.righttopbodyright {
  padding-right: 12px;
}

.righttopbody-1 {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.righttopbody-img {
  padding-top: 8px;
}
</style>
